import React, {Component} from 'react'
import {ADD,MINUS,WAIT} from './../redux/types'
import connect from './../redux/connect'

class counter2 extends Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <div >
                <button onClick={()=>this.props.add(2)}>+</button>
                <span>{this.props.value}</span>
                <button onClick={()=>this.props.minus(3)}>-</button>
                <button onClick={()=>this.props.wait(3)}>异步加</button>
            </div>
        )
    }
}


//mapStateToProps 把store里的状态对象映射成属性
let mapStateToProps=(state)=>({
    value:state.counter.number
});
//把dispatch方法映射成ui组件的属性
let mapDispatchToProps=(dispatch)=>({
    add:(amount)=>dispatch({type:ADD,amount}),
    minus:(amount)=>dispatch({type:MINUS,amount}),
    wait:(amount)=>setTimeout(()=>dispatch({type:WAIT,amount}),3000)
});


export default connect(mapStateToProps,mapDispatchToProps)(counter2)